<template>
  <div class="trading-heard" style="padding: 10px 5px">
    <div class="flex">
      <div class="heads head1 flexc">
        <div class="bilogo">
          <img src="../../../assets/img/eos1.png" alt="">
        </div>
        <div>
          <p class="fontb"><em class="color-fff">REX</em></p>
          <a :href="handleRexHref()" class="colorThis fontx" target="_blank"> {{ $t('rex.rexInfo') }} </a>
        </div>
      </div>
      <div class="flex" style="flex: 1">
        <!-- 最新价 -->
        <div class="heads head2" style="min-width: 200px;">
          <p>{{$t('jy.newprice')}}</p>
          <span class="fontb fontcd"
          :class="{'color-red' : ramData.change < 0, 'color-sl' : ramData.change > 0}">{{ rexPrice }}
            <span class="ml5 color-999 fontd">EOS/REX</span>
          </span>
        </div>
        <!-- 24H涨跌幅 -->
        <div class="heads head3" style="max-width: 160px">
          <p>24H{{$t('jy.zdf')}}</p>
          <span class="fontcd color-sl"
          :class="{'color-red' : ramData.change < 0}">
          {{ ramData.change && ramData.change > 0 ? `+${handleChangeDate(ramData.change)}%` :
          (ramData.change ? `${handleChangeDate(ramData.change)}%` : `${toFixed(0, 6)}%`) }}</span>
        </div>
        <!-- 24H最高价 -->
        <div class="heads head4">
          <p>24H{{$t('jy.zgj')}}</p>
          <span class="fontcd color-fff">{{ (ramData.high).toFixed(11) }}
            <span class="ml5 color-999 fontd">EOS/REX</span>
          </span>
        </div>
        <!-- 24H最低价 -->
        <div class="heads head5">
          <p>24H{{$t('jy.zdj')}}</p>
          <span class="fontcd color-fff">{{ (ramData.low).toFixed(11) }}
            <span class="ml5 color-999 fontd">EOS/REX</span>
          </span>
        </div>
        <!-- 24H成交额 -->
        <div class="heads head8" style="max-width: 180px; cursor: pointer;" @click="showType = !showType">
          <p>
            <span class="changeType">
              <span v-if="!showType">24H{{$t('jy.cjl')}}</span>
              <span v-else>{{$t('footer.total24H')}}</span>
              <i class="iconfont icon-shangxia" style="font-size: 14px; color: #278eda;"></i>
            </span>
          </p>
          <template v-if="!showType">
            <span class="fontcd color-fff">{{toFixed(ramData.volume, 4) || '0.0000'}}</span>
            <span class="ml5 color-999 fontd">REX</span>
          </template>
          <template v-else>
            <span class="fontcd color-fff">{{toFixed(ramData.amount, 4) || '0.0000'}}</span>
            <span class="ml5 color-999 fontd">EOS</span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { toFixed, accMul, toNonExponential } from '@/utils/validate';
import Io from '@/utils/socket/index';
// import bus from '@/utils/bus';

export default {
  name: 'ram-heard',
  data() {
    return {
      language: '',
      ramData: {
        high: 0,
        low: 0
      },
      rexPrice: 0,
      showType: true, // 显示成交额还是成交量
    };
  },
  props: {
    rexTableRows: Object,
  },
  watch: {
    '$store.state.app.language': function change(val) {
      this.language = val;
    },
    'rexTableRows.timer': function change() {
      this.handleGetTableRow();
    },
  },
  created() {
  },
  mounted() {
    this.language = this.$store.state.app.language;
    this.handleLoadHeardWs();
  },
  beforeDestroy() {
    Io.cfwsUnsubscribe('rex.ticker'); // 取消头部订阅
  },
  methods: {
    // 获取头部信息
    handleLoadHeardWs() {
      Io.cfwsRexHeard((data) => {
        this.ramData = data;
        // bus.$emit('handlePiceChange', data.price);
      });
    },
    toFixed(num, p) {
      return toFixed(num, p);
    },
    handleChangeDate(change) {
      const ch = accMul(change, 100);
      return toFixed(toNonExponential(ch), 6);
    },
    // REX 介绍
    handleRexHref() {
      const url = {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360028013572-REX-%E7%BB%88%E6%9E%81%E6%8C%87%E5%8D%97',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360028013572-REX%E7%B5%82%E6%A5%B5%E6%8C%87%E5%8D%97',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360028013572-REX-Instructions',
        ko: 'https://newdex.zendesk.com/hc/ko/articles/360028013572-REX-Instruction',
      }
      return url[this.language]
    },
    // REX 价格
    handleGetTableRow() {
      const row = this.rexTableRows;
      const pr = parseFloat(row.total_lendable, 0) / parseFloat(row.total_rex, 0);
      this.rexPrice = (Number(toNonExponential(pr))).toFixed(11);
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";


.coinaside{

  .titlecoin{
    opacity: .7;
    font-size: 16px;
  }
}

.cionfor {
  max-width: 500px;
  min-width: 500px;
  flex-wrap: wrap;

  .item {
    padding: 10px 20px;
    justify-content: center;
    min-width: 220px;

    .name{
      font-size: 12px;
      text-align: left;
      padding: 0 10px 0 0;
      opacity: .6;
      display: block;
    }

    .data{
      text-align: left;
    }
  }
}

.trading-heard {
  .ml5.fontd {
    margin-left: 2px !important;
  }

  padding: 5px;

  .heads {
    text-align: left;
    flex: 1;

    p {
      color: #888;
      padding-bottom: 5px;
    }
  }

  .head1 {
    position: relative;
    text-align: left;
    margin-right: 20px;
    padding-right: 20px;
    max-width: 260px;

    p.fontb {
      padding-bottom: 0;

      em {
        font-size: 24px;
      }
    }

    &::before {
      content: ' ';
      position: absolute;
      width: 1px;
      height: 85%;
      background: #dedede;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .bilogo {
    width: 45px;
    height: 45px;
    // background: #3C4556;
    margin-right: 10px;
    border-radius: 100%;

    img {
      width:45px;
      height: 45px;
      // border-radius: 100%;
      // box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, .2);
      vertical-align: middle;
      background: #fff;
      border-radius: 50%;
    }
  }
}
.coinInfobox {
  overflow: hidden;

  /deep/ .el-loading-mask {
    background: rgba(255, 255, 255, 1)
  }
}
.hideCoinInfobox {
  visibility: hidden;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  margin-top: 0 !important;
}

em {
  font-style: normal;
}

.fontb {
  // font-weight: bold;
}
.fontcd {
  font-size: 16px !important;
}


.color-999 {
  color: #999;
}
.color-sl {
  color: #67C269;
}
.color-red {
  color: #FF1739;
}
.color-fff {
  color: rgba(0, 0, 0, .7);
}

.theme-1B1D27 {
  .color-fff {
    color: rgba(255, 255, 255, .8);
  }

  .trading-heard {

    .heads {
      p {
        color: #7b8db9
      }
    }

    .head1 {
      p.fontb {
        em {
        }
      }

      &::before {
        background: rgba(255, 255, 255, .08);
      }
    }

    .bilogo {
      img {
        // box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, .3);
      }
    }
  }

  .color-999 {
    color: #7b8db9;
  }
}
</style>
